<template>
    <div>
        <div class="banner" @click="handleBannerClick"> 
            <img class="banner-img" :src="bannerImg" alt="">
            <div class="banner-info">
                <div class="banner-title">{{sightName}}</div>
                <div class="banner-number"><span class="iconfont banner-icon">&#xe604;</span>{{bannerImgs.length}}</div>
            </div>
        </div>
        <!-- 默认隐藏,给这个组件包一个动画效果 -->
        <fade-animation>
            <common-gallary 
            :imgs="bannerImgs" 
            v-show="showGallary"
            @close="handleGallaryClose"
            ></common-gallary>
        </fade-animation>
    </div>
</template>
<script>
import CommonGallary from "common/gallary/Gallary"
import FadeAnimation from "common/fade/FadeAnimation"
export default {
    name:'DetailBanner',
    props:['bannerImg', 'sightName', 'bannerImgs'],
    components:{CommonGallary,FadeAnimation},
    data(){
        return{
            imgs:[
                'http://img1.qunarzz.com/sight/p0/1906/e7/e7276de002459b50a3.img.jpg_350x240_dd696261.jpg','http://img1.qunarzz.com/sight/p0/1508/36/88ba72984816cd08810a80e0d65e4224.water.jpg_350x240_dab48433.jpg'
            ],
            showGallary:false
        }
    },
    methods:{
        handleBannerClick(){
            this.showGallary=true
        },
        handleGallaryClose(){
            this.showGallary=false
        }
    }
}
</script>
<style scoped lang="stylus">
.banner
    position relative
    overflow: hidden;
    height: 0;
    padding-bottom 55%
    .banner-img
        width 100%
    .banner-info
        display flex
        position absolute
        height .6rem
        align-items center
        left 0
        right 0
        bottom 0
        line-height .6rem
        background: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
        .banner-title
            flex 1
            color #fff
            font-size .32rem
            padding .2rem 
        .banner-number
            padding 0 .4rem
            border-radius .2rem
            background rgba(0,0,0,.8)
            font-size .24rem
            color #fff
            .banner-icon    
                font-size .24rem
                color #fff
                padding-right .2rem

</style>
